<template>
  <div class="direct-pay">
      <div class="order-message">
        <div><span>报名活动：</span>{{activeDetails.activityName}}</div>
        <div><span>订单号：</span>{{indent}}</div>
        <div><span>需支付：</span>￥{{activeDetails.money}}</div>
      </div>
      <div class="pay-select">
        <h5>支付方式</h5>
       <div class="clear-fix">
          <img src="../assets/微信支付@3x.png" alt="">
          <span>微信支付</span>
          <div>
            <img src="../assets/选中@3x.png" alt="">
          </div>
        </div>
        <p><a href="tel://400-123-1234">支付有问题？请拨打<span>0755-22321012</span></a></p>
     </div>
     <pay :money="activeDetails.money" :activeIdPay="activeDetailsId" :payStatus="0" v-on:getOrderForm="getIndent"></pay>
  </div>
</template>

<script>
import pay from './sub_comonents/pay'
export default {
    data() {
        return {
            name: '直接支付',
            activeDetails: {},
            activeDetailsId: this.$route.params.activeId,
            indent: {}
        }
    },
    created() {
        document.title = this.name
        // 获取用户信息
        this.utils.$get(this.utils.GET_USER_mESSAGE, data => {})
        // 获取活动信息
        this.utils.$get(
            this.utils.GET_CHIPS_DETAILS,
            data => {
                this.activeDetails = data.data
            },
            { id: this.$route.params.activeId }
        )
    },
    components: {
        pay
    },
    methods: {
        getIndent(val) {
            this.indent = val.orderFormNumber
        }
    },
}
</script>


<style lang="less">
.direct-pay {
    height: 100%;
    .order-message {
        padding: 0.15rem 0.4rem;
        > div {
            font-size: 0.28rem;
            padding: 0.15rem 0;
            color: #232323;
            > span {
                color: #999;
            }
            &:last-child {
                color: #f93a3a;
            }
        }
    }
    .pay-select {
        background-color: #f9f9f9;
        padding: 0.2rem 0 8rem;
        > h5 {
            padding: 0.4rem 0.24rem 0.2rem;
        }
        > p {
            margin-top: 0.4rem;
            > a {
                display: block;
                font-size: 0.24rem;
                color: #999;
                text-align: center;
                > span {
                    color: #00d8c9;
                    margin-left: 0.1rem;
                }
            }
        }
        > div {
            background-color: #fff;
            height: 0.88rem;
            padding: 0.18rem 0.24rem;
            > img {
                width: 0.52rem;
                height: 0.52rem;
                float: left;
            }
            > span {
                display: inline-block;
                line-height: 0.52rem;
                margin-left: 0.2rem;
            }
            > div {
                float: right;
                width: 0.42rem;
                height: 0.42rem;
                > img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
}
</style>

